<template>
    <div class="profile-privacy-settings-page">
        <van-nav-bar title="Privacy Settings" left-text="Back" left-arrow @click-left="$router.back()" />

        <div class="settings-content">
            <van-cell-group inset title="Profile Privacy">
                <van-cell title="Who can see my profile" is-link @click="showProfileVisibility = true">
                    <template #value>{{ selectedProfileVisibility }}</template>
                </van-cell>
                <van-cell title="Who can see my posts" is-link @click="showPostVisibility = true">
                    <template #value>{{ selectedPostVisibility }}</template>
                </van-cell>
                <van-cell title="Who can message me" is-link @click="showMessageVisibility = true">
                    <template #value>{{ selectedMessageVisibility }}</template>
                </van-cell>
            </van-cell-group>

            <van-cell-group inset title="Activity Privacy">
                <van-cell title="Show online status" is-link>
                    <template #right-icon>
                        <van-switch v-model="settings.showOnlineStatus" />
                    </template>
                </van-cell>
                <van-cell title="Show training activity" is-link>
                    <template #right-icon>
                        <van-switch v-model="settings.showTrainingActivity" />
                    </template>
                </van-cell>
            </van-cell-group>

            <div class="save-section">
                <van-button type="primary" block @click="saveSettings">
                    Save Settings
                </van-button>
            </div>
        </div>

        <!-- Visibility Pickers -->
        <van-popup v-model:show="showProfileVisibility" position="bottom">
            <van-picker :columns="visibilityOptions" @confirm="onProfileVisibilityConfirm"
                @cancel="showProfileVisibility = false" />
        </van-popup>

        <van-popup v-model:show="showPostVisibility" position="bottom">
            <van-picker :columns="visibilityOptions" @confirm="onPostVisibilityConfirm"
                @cancel="showPostVisibility = false" />
        </van-popup>

        <van-popup v-model:show="showMessageVisibility" position="bottom">
            <van-picker :columns="visibilityOptions" @confirm="onMessageVisibilityConfirm"
                @cancel="showMessageVisibility = false" />
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { showToast } from 'vant'

const settings = reactive({
    showOnlineStatus: true,
    showTrainingActivity: true
})

const showProfileVisibility = ref(false)
const showPostVisibility = ref(false)
const showMessageVisibility = ref(false)

const selectedProfileVisibility = ref('Everyone')
const selectedPostVisibility = ref('Friends')
const selectedMessageVisibility = ref('Friends')

const visibilityOptions = [
    { text: 'Everyone', value: 'everyone' },
    { text: 'Friends', value: 'friends' },
    { text: 'Only Me', value: 'private' }
]

const onProfileVisibilityConfirm = (value: any) => {
    selectedProfileVisibility.value = value.text
    showProfileVisibility.value = false
}

const onPostVisibilityConfirm = (value: any) => {
    selectedPostVisibility.value = value.text
    showPostVisibility.value = false
}

const onMessageVisibilityConfirm = (value: any) => {
    selectedMessageVisibility.value = value.text
    showMessageVisibility.value = false
}

const saveSettings = () => {
    showToast('Privacy settings saved!')
}
</script>

<style lang="scss" scoped>
.profile-privacy-settings-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.settings-content {
    padding: 16px;
}

.save-section {
    margin-top: 24px;
}
</style>